<template>
    <u-popup :show="show" @close="close" :closeable="true" closeIconPos="top-left" :closeOnClickOverlay="false">
        <text class="title">请选择房间</text>
        <u-gap height="5"></u-gap>
        <template v-if="houseList.length > 0">
            <view class="u-flex-row">
                <!--左侧-->
                <scroll-view class="index-scroll" :scroll-top="scrollTop" scroll-with-animation scroll-y>
                    <view
                            class="he-item"
                            @click="setSelect(index)"
                            :class="current === index ? 'he-item__1' : ''"
                            v-for="(item, index) in houseList"
                            :key="item.s_name"
                    >
                        <text class="he-item__text">{{ item.s_name }}</text>
                    </view>
                </scroll-view>
                <!--右侧-->
                <scroll-view scroll-y>
                    <view
                            v-for="(item, index) in rightHouseList"
                            :key="item.build_name"
                    >
                        <text class="unit__text">{{ item.build_name }}</text>

                        <template v-for="(value, k) in item.children">
                            <text
                                    :class="current_unit === index && current_room === k ? 'room__1' : ''"
                                    class="room__text"
                                    @click="selectRoom(index,k)"
                            >{{ value.unit + '单元' + value.room_num + '（' + value.join_room_name + '）' }}</text>
                        </template>
                    </view>
                </scroll-view>
            </view>
            <view class="content">
                <u-button type="primary" text="下一步" :disabled="disabled" @click="nextHandler"></u-button>
            </view>
        </template>
        <template v-else>
            <u-empty mode="favor" text="还没有收藏房源" textSize="18" iconSize="100" marginTop="200rpx"></u-empty>
            <view style="margin: 60rpx">
                <u-button type="primary" text="查看更多房源" @click="toIndexPage"></u-button>
            </view>
        </template>
    </u-popup>
</template>

<script>
    export default {
        name: "SelectOriginHouse",
        props:{
            show:{
                type:Boolean,
                default:function () {
                    return true;
                }
            },
            h_id:{
                type:String,
                default:function () {
                    return '';
                }
            },
            houseList:{
                type:Array,
            }
        },
        data(){
            return {
                current: 0,
                current_unit: '',
                current_room: '',
                scrollTop: 0,
                menuHeight: 0, // 左边菜单的高度
                menuItemHeight: 0, // 左边菜单item的高度
                disabled: true
            };
        },
        computed:{
            rightHouseList(){
                if (this.houseList.length > 0){
                    return this.houseList[this.current].children;
                }
            }
        },
        methods: {
            async setSelect(index) {
                if (index === this.current) return;
                this.current = index;
                // 如果为0，意味着尚未初始化
                if (this.menuHeight === 0 || this.menuItemHeight === 0) {
                    await this.getElRect("index-scroll", "menuHeight");
                    await this.getElRect("he-item", "menuItemHeight");
                }
                // 将菜单菜单活动item垂直居中
                this.scrollTop =
                    index * this.menuItemHeight +
                    this.menuItemHeight / 2 -
                    this.menuHeight / 2;
            },
            // 获取一个目标元素的高度
            getElRect(elClass, dataVal) {
                new Promise((resolve, reject) => {
                    const query = uni.createSelectorQuery().in(this);
                    query
                        .select("." + elClass)
                        .fields({ size: true }, (res) => {
                            // 如果节点尚未生成，res值为null，循环调用执行
                            if (!res) {
                                setTimeout(() => {
                                    this.getElRect(elClass);
                                }, 10);
                                return;
                            }
                            this[dataVal] = res.height;
                        })
                        .exec();
                });
            },

            selectRoom(index,key){
                if (key === this.current_room && index === this.current_unit) return;

                this.current_unit = index;
                this.current_room = key;
                this.disabled = false;

                let unit = this.houseList[this.current].children;
                let room = unit[index].children;
                this.$emit('update:h_id', room[key].id);
            },

            close() {
                this.$emit('cancel', '');
                uni.navigateBack({
                    delta: 1,
                });
            },
            // clearKeyword(){
            //     this.$emit('update:h_id', '');
            // },

            nextHandler(){
                if (this.h_id === '' || this.disabled){
                    uni.showToast({
                        title: '请选择房间', //提示文字
                        duration: 1500, //显示时长
                        icon: "error", //图标，支持"success"、"loading"
                    });
                } else {
                    this.$emit('cancel', '');
                }
            },

            toIndexPage(){
                this.close();
            },
        }

    }
</script>

<style lang="scss" scoped>
    .title{
        font-size: 36rpx;
        margin: 20rpx auto;

    }
    .content{
        padding: 20rpx;
    }

    .index-scroll {
        width: 220rpx;
        height: 75vh;
        background: #f5f5f5;
    }

    .he-item {
        width: 220rpx;
        height: 88rpx;
        margin-bottom: 20rpx;
    }

    .he-item__1 {
        background: #ffffff;
    }

    .he-item__1 .he-item__text {
        color: #33A7FF;
        border-left: 4px solid #33A7FF;
    }

    .he-item__text {
        display: inline-block;
        width: 220rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        text-align: center;
        color: #666666;
        border-left: 4px solid transparent;
        line-height: 88rpx;
    }

    .unit__text{
        display: inline-block;
        width: 100%;
        font-size: 28rpx;
        font-family: PingFang SC;
        color: #666666;
        background: #f5f5f5;
        border-left: 4px solid transparent;
        padding-left: 30rpx;
    }

    .room__text{
        display: inline-block;
        width: 100%;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        border-bottom: 1rpx solid #f3f4f6;
        line-height: 100rpx;
        padding-left: 30rpx;
    }

    .room__1{
        color: #ffffff;
        font-weight: 600;
        background-color: #33A7FF;
    }
</style>